<template name="recommend">
	<view class="rec-box" @tap="onHot" :data-type="item.AcType" :data-goodID="item.AcId"
		:data-goodsId="item.GoodsId">
		<view class="rec-img">
			<image class="rec-image" mode="aspectFit" :src="item.Img"></image>
			<view class="image-content">
				<text class="image-con-left" v-if="item.AcType==1">{{item.GroupQty}}人拼团</text>
				<text class="image-con-left" v-else-if="item.AcType==2"></text>
				<text class="image-con-left" v-else>砍到底！0元带回家！</text>
				<view class="image-con-right">
					<view class="image-view">
						<image class="image-img" src="http://minipos.posyun3721.com/image/marketing/people-img2.png">
						</image>
						<text>{{item.ReadCount}}</text>
					</view>
					<view class="image-view">
						<image class="image-img" src="http://minipos.posyun3721.com/image/marketing/user.png"></image>
						<text>{{item.UsedQty}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="rec-content">
			<view class="rec-title">
				<text
					:class="[item.AcType==1?'type1':(item.AcType==2?'type2':'type3')]">{{item.AcType==1?'拼团':(item.AcType==2?'秒杀':'砍价')}}</text>
				<text class="title">{{item.Title}}</text>
			</view>
			<view class="rec-originator">
				<view class="originator">
					<!-- <image class="orig-image" src="{{item.UserImg}}"></image> -->
					<text class="orig-name">{{name}}</text>
				</view>
				<view class="money">
					<text>¥{{item.Price}}</text>
					<!-- <button class="but">立即抢购</button> -->
				</view>
			</view>
		</view>
		<view class="activity">
			<text>剩余：{{item.IvQty}}份</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style>
	.rec-box {
		width: 702rpx;
		height: 515rpx;
		box-shadow: 0px 6px 6px rgba(0, 0, 0, 0.05);
		border-radius: 16rpx;
		background: #fff;
		margin: 0 auto;
		margin-bottom: 30rpx;
		position: relative;
	}

	.activity {
		width: 160rpx;
		height: 50rpx;
		background: #249ef3;
		border-radius: 8rpx;
		position: absolute;
		top: 20rpx;
		right: -14rpx;
	}

	.activity>text {
		color: #fff;
		font-size: 24rpx;
		line-height: 50rpx;
		display: block;
		text-align: center;
	}

	.rec-img {
		width: 100%;
		height: 356rpx;
		position: relative;
		margin-bottom: 20rpx;
	}

	.rec-image {
		width: 100%;
		height: 100%;
	}

	.image-content {
		width: 100%;
		height: 58rpx;
		background: #000;
		opacity: 0.5;
		position: absolute;
		bottom: 0rpx;
		color: #fff;
	}

	.image-con-left {
		margin-left: 30rpx;
		font-size: 32rpx;
		line-height: 58rpx;
	}

	.image-con-right {
		float: right;
		margin-right: 30rpx;
		font-size: 24rpx;
	}

	.image-view {
		float: left;
		line-height: 58rpx;
		margin-right: 16rpx;
	}

	.image-view>.image-img {
		width: 32rpx;
		height: 32rpx;
		margin: 13rpx 0;
		float: left;
		margin-right: 10rpx;
	}

	.rec-content {
		width: 100%;
		height: 160rpx;
		position: relative;
	}

	.rec-title {
		margin-left: 30rpx;
	}

	.rec-title>text:first-child {
		width: 72rpx;
		height: 42rpx;
		color: #fff;
		font-size: 24rpx;
		line-height: 42rpx;
		text-align: center;
		margin-right: 20rpx;
		float: left;
		border-radius: 4rpx;
	}

	.type1 {
		background: linear-gradient(180deg, rgba(255, 191, 0, 1) 0%, rgba(255, 122, 39, 1) 100%);
	}

	.type2 {
		background: linear-gradient(180deg, rgba(71, 163, 255, 1) 0%, rgba(99, 63, 199, 1) 100%);
	}

	.type3 {
		background: linear-gradient(180deg, rgba(243, 77, 237, 1) 0%, rgba(135, 26, 230, 1) 100%);
	}

	.title {
		color: #333;
		font-size: 32rpx;
		line-height: 42rpx;
		display: block;
		width: 640rpx;
	}

	.rec-originator {
		position: absolute;
		bottom: 28rpx;
		width: 642rpx;
		margin: 0 30rpx;
	}

	.originator {
		width: auto;
		height: 72rpx;
		float: left;
		line-height: 72rpx;
	}

	.orig-image {
		width: 72rpx;
		height: 72rpx;
		margin-right: 22rpx;
		background-color: #EBEBEB;
		border-radius: 50%;
		float: left;
	}

	.orig-name {
		color: #999999;
		font-size: 24rpx;
		text-align: center;
		display: block;
		float: left;
	}

	.money {
		float: right;
	}

	.money>text:first-child {
		color: #FF2741;
		font-size: 36rpx;
		font-weight: bold;
		line-height: 60rpx;
		float: left;
	}

	.money>.but {
		width: 170rpx;
		height: 60rpx;
		padding: 0;
		line-height: 60rpx;
		background: linear-gradient(180deg, rgba(238, 82, 73, 1) 0%, rgba(188, 11, 0, 1) 100%);
		border-radius: 8rpx;
		float: left;
		margin-left: 20rpx;
		color: #fff;
		font-size: 28rpx;
	}
</style>
